<template>
  <div class="total">
    <div class="left"><Logo style="width: 60px;height: 60px"></Logo><h3>景区购票</h3></div>
    <el-menu :default-active="activeIndex" class="menu" mode="horizontal">
      <el-menu-item index="1" @click="toMain">首页推荐</el-menu-item>
      <el-menu-item index="2" @click="toClassView">分类浏览</el-menu-item>
      <el-menu-item index="3" @click="searchByName">搜素</el-menu-item>
      <el-menu-item index="4" @click="toMyPurchase">购买记录</el-menu-item>
      <el-menu-item index="5" @click="toAdmin" v-if="role!=='0'">数据管理</el-menu-item>
    </el-menu>
    <div class="search">
      <el-input size="small" suffix-icon="el-icon-search" v-model="filmName"></el-input>
      <el-button type="primary" size="small" style="background-color: lightgoldenrodyellow;color: black;margin-left: 20px" @click="searchByName">search</el-button>
    </div>
    <div class="avatar"><el-avatar @click.native="toPersonInfo" style="cursor:pointer; width:50px; height: 50px; margin: 5px; border-style:solid;margin-right: 40px"><img src="../assets/images/rei.jpg"></el-avatar></div>
  </div>
</template>

<script>
  import logo from "./Logo";
  import Cookies from 'js-cookie'
  export default {
    name: "CatshitHeader",
    components:{logo},
    props:{
      activeIndex:{
        type:String,
      }
    },
    data(){
      return{
        filmName:"",
        role:Cookies.get('user_role')
      }
    },
    methods:{
      toClassView(){
        this.$router.push({path: `/ViewMovie/ClassView`});
      },
      toUserCharacter(){
        this.$router.push({path: `/PersonalInfo/`});
      },
      toMain(){
        this.$router.push(({path:'/ViewMovie/'}));
      },
      toBoxList(){
        this.$router.push(({path:'/ViewMovie/BoxRanking'}));
      },
      toMyPurchase(){
        this.$router.push(({path:'/PersonalInfo/',query:{"tag":'2'}}));
      },
      toPersonInfo(){
        this.$router.push(({path:'/PersonalInfo/',query:{"tag":'1'}}));
      },
      searchByName(){
        this.$router.push({path:'/viewMovie/Search',query:{"filmName":this.filmName}})//结果页结果页
      },
      toAdmin(){
        this.$router.push('/admin')
      }
    }

  }
</script>

<style scoped>
  .total{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: lightgoldenrodyellow;
    height: 61px;
    position: fixed;
    top: 0px;
    z-index:999;
  }
  .left{
    display: flex;
    align-items: center;
    width: 15%;
  }
  .menu{
    background-color: lightgoldenrodyellow;
  }
  .menu el-menu-item{
    height: 60px;
  }
  .avatar{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 15%;
  }
  .search{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .search el-input{
  }
</style>
